<template lang="pug">
  .body
    .top_drag
    .tab
      span(@click="tab = 1", :class="{'active': tab == 1}") QQ登录
      span(@click="tab = 2", :class="{'active': tab == 2}") 微信登录
      .shortline(:style = '"margin-left:" + String(tab * 70 - 120) + "px"')
</template>
<script>
export default {
  data () {
    return {
      tab: 1
    }
  }
}
</script>

<style lang="stylus" scoped>
@import './../../assets/css/var'
.body
  padding-top 30px
  position relative
  .tab
    border-bottom 1px solid $dWhite
    display flex
    flex-flow row nowrap
    justify-content center
    position relative
    .shortline
      position absolute
      bottom 0
      height 0
      width 30px
      border-bottom 1px solid $Black
      transition all 0.3s ease
      left 50%
    span
      display inline-block
      font-size 13px
      line-height 13px
      width 70px
      box-sizing border-box
      text-align center
      padding 10px 5px
      font-weight 400
      color $elBlack
      cursor pointer
      &.active
        color $Black
      &:hover
        color $Green
</style>

